如何使用Vite创建Vue3的uniapp项目

2024-06-29 13:37| 来源: 网络整理| 查看: 265

项目结构 my-vue3-project ├─ .env //默认环境变量 ├─ .env.development //开发环境变量 ├─ .eslintrc-auto-import.json //（autoimport变量，eslint配置）由auto-import插件生成 ├─ .eslintrc.js //eslint配置文件 ├─ .gitignore ├─ auto-imports.d.ts //（autoimport变量，ts声明文件）由auto-import插件生成 ├─ index.html ├─ jsconfig.json ├─ package-lock.json ├─ package.json ├─ src │ ├─ App.vue │ ├─ components │ ├─ main.js │ ├─ manifest.json //uniapp项目配置文件 │ ├─ pages │ │ └─ index │ │ └─ IndexView.vue │ ├─ pages.json //页面配置文件 │ ├─ services // 请求后端服务目录 │ │ ├─ api.js // 后端api │ │ └─ http.js //请求 │ ├─ shime-uni.d.ts │ ├─ static //静态文件目录 │ │ └─ logo.png │ ├─ store //pinia全局状态库 │ │ └─ useUserStore.js │ ├─ uni.scss │ └─ utils //公共的工具方法 └─ vite.config.js 创建历程项目创建1 npx degit dcloudio/uni-preset-vue#vite my-vue3-project Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径HBuilderX Windows 版本菜单栏工具->设置->运行配置->node路径项目依赖安装 Eslint

Eslint的相关配置可参考文章：Web项目如何配置Eslint 注意：在配置完Eslint之后，在项目中使用uni的时候会报uni未被定义的错，需在.eslintrc.js中加上以下代码

globals: { uni: true } vite.config.js中eslintPlugin配置 import eslintPlugin from 'vite-plugin-eslint' export default defineConfig({ plugins: [ eslintPlugin({ cache: true, include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue', 'src/*.nvue'], failOnError: false // eslint报错不影响运行 }), ] Pinia2 安装

注意：在这个项目中安装的vue版本是：3.2.47，pinia：3.1及以上版本需要依赖vue：3.3及以上版本才能运行成功。

@REM npm 安装 npm i [email protected] @REM node 安装 yarn add [email protected]

安装依赖时出现如下报错可尝试通过参考文章解决：npm安装依赖时出现Peer Dependencies冲突报错

While resolving: [email protected] Found: [email protected] node_modules/vue peer vue@"^3.2.25" from @vitejs/[email protected] node_modules/@vitejs/plugin-vue ... Conflicting peer dependency: [email protected] node_modules/vue peer vue@">= 2.5 < 2.7" from @vue/[email protected] node_modules/@vue/composition-api peerOptional @vue/composition-api@"^1.4.0" from [email protected] node_modules/pinia pinia@"2.0.34" from the root project Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution. Luch-Request3

uniapp原生的uni.request使用比较麻烦，它并非使用Promise的形式也不支持请求拦截和相应拦截的配置，而luch-request基于 Promise 对象实现更简单的 request 使用方式，支持请求和响应拦截

支持全局挂载支持多个全局配置实例支持自定义验证器支持文件上传/下载支持task 操作支持自定义参数支持多拦截器对参数的处理比uni.request 更强安装 npm install luch-request -S Sass支持4 安装 npm i sass sass-loader -D unplugin-auto-import5

unplugin-auto-import 是为Vite、Webpack、Rollup和esbuild按需自动导入API，同时支持TypeScript。使用它在vue3项目中使用预设导入的api就不需要import，可以通过预设自动导入模块，增强开发体验

安装 npm i -D unplugin-auto-import 在Vite.config.js中加入如下配置 import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins:[ AutoImport({ // 需要自动引入的文件 include: [ /\.[j]sx?$/, /\.vue$/, /\.vue\?vue/, /\.nvue$/, /\.nvue\?nvue/, /\.md$/, ], // 全局自动引入api预设 imports: [ // 插件预设支持导入的api 'vue', // 'vue-router', 'pinia', 'uni-app' // 自定义导入的api ], // eslint配置 eslintrc: { enabled: true, // Default `false` filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json` globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable') }, dts: './auto-imports.d.ts', // dts:false }) ] }) 生成eslint配置文件并使用

通过执行命令npm run dev:h5 运行项目，运行成功时项目根目录会生成auto-imports.d.ts和**.eslintrc-auto-import.json**两个文件，然后在.eslintrc.js文件中的extends属性中，引入该文件

extends: [ 'standard', 'plugin:vue/vue3-essential', './.eslintrc-auto-import.json' ]

注意：引入后需重新运行项目才能生效

添加默认和开发环境变量文件

在项目根目录添加.env和.env.development文件，以配置环境变量详细配置教程可参照官网：Vite环境变量和模式

配置UI库uni-ui6 安装 npm i @dcloudio/uni-ui 配置 vite.config.js

注意 cli 项目默认是不编译 node_modules 下的组件的，导致条件编译等功能失效，导致组件异常需要在vite.config.js增加 @dcloudio/uni-ui 包的编译即可正常

transpileDependencies: ['@dcloudio/uni-ui'] pages.json

正常来说这样子引入的话，使用组件时，需要在页面处import才可以使用，然而可以通过npm+easycom的形式来全局引入组件。在 pages.json中加入如下代码，即可在使用组件而不需在页面处import。

"easycom": { "autoscan": true, "custom": { "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } } 项目到这里就结束了，这里提供该项目的gitee地址，方便拉取直接使用

这个项目中master分支中使用的Eslint风格为Standard，而prettier分支使用的风格为Prettier

https://gitee.com/cai-shaohua/my-uniapp-project

内容来自uniapp官网，详情可查看使用vue-cli查看目录 ↩︎

pinia官网 ↩︎

luch-request官网 ↩︎

sass官网 ↩︎

unplugin-auto-import官网 ↩︎

uni-ui Github地址 ↩︎

【本文地址】

公司简介

联系我们